import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  // 添加数据
  state: {
    userData: {},

    navList: [
      // {text:"主页",id:1,path:"/home"},
    ],
    maxWidth: "100%",
    fontSize: "16px",
    fontFamily: "Arial, Helvetica, sans-serif"
  },
  getters: {
  },
  mutations: {
    // 关闭Tab窗口
    closeTab(state, arr) {
      // console.log('222', arr);
      state.navList = arr;
    },
    // 添加Tab窗口
    addTab(state, route) {

      let arr = state.navList || [];
      // console.log('arr', arr);
      let text = '';
      if (route.meta && route.meta.title) {
        text = route.meta.title
      } else {
        text = route.query.cate || route.query.type;
      }


      let isHave = arr.some(item => item.text == text)
      if (isHave) {
        return false;
      }
      let path = route.path;
      if (path == '/cateList') {
        path = path + "?cate=" + route.query.cate
      }
      if (path == '/comment') {
        path = path + "?type=" + route.query.type
      }
      //  console.log(route);
      arr.push({
        id: Symbol(),
        text: text,
        path: path
      })
      // 控制标签数量不超过11个
      if (arr.length > 11) {
        arr.shift(); // 移除最旧的标签（第一个）
      }
      state.navList = arr;
    },
    // 改变界面宽度
    changeMaxWidth(state, value) {
      state.maxWidth = value;
    },
    // 改变界面字体大小
    changeFontSize(state, value) {
      state.fontSize = value;
    },
    // 改变界面字体类型
    changeFontFamily(state, value) {
      state.fontFamily = value;
    }
  },
  actions: {
  },
  modules: {
  },
  plugins: [
    createPersistedState({
      // 只持久化 userData，避免 navList 等临时状态也被持久化
      paths: ['userData', 'maxWidth', 'fontSize', 'fontFamily']
    })
  ]
})
